<template>
  <el-upload
    :auto-upload="true"
    :before-upload="beforeAttFileUpload"
    :drag="drag"
    :file-list="files"
    :http-request="uploadAttachment"
    :multiple="false"
    :on-change="onChange"
    :on-error="handleError"
    :on-exceed="handleExceed"
    :on-preview="onPreview"
    :on-success="handleSuccess"
    :show-file-list="showFileList"
    accept=".doc, .pdf, .xls, .xlsx"
    action="/api/Common/PostFiles"
    class="upload-demo"
    ref="attFile"
    style="text-align: left !important"
  >
    <slot>
      <template slot="trigger">
        <el-button
          size="mini"
          type="primary"
        >点击上传</el-button>
        <span class="info ml-1">上传文件不超过 5 MB，文件格式为.xls,.xlsx</span>
      </template>
      <!-- :file-list="[{ name: this.name, url: this.value }]" -->
      <!-- <div slot="tip" class="el-upload__tip">
                    只能上传jpg/png文件，且不超过500kb
      </div>-->
    </slot>
    <slot name="tip">
      <div
        class="el-upload__tip"
        slot="tip"
      >
        <!-- <span hidden></span> -->
      </div>
    </slot>
  </el-upload>
</template>

<script>
export default {
  props: {
    value: String,
    name: String,
    onSuccess: Function,
    showFileList: {
      type: Boolean,
      default: true,
    },
    drag: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      url: this.value,
      fileName: this.name,
      fileList: [],
    };
  },

  computed: {
    files: {
      get() {
        return this.fileList;
      },
      set(newValue) {
        console.log(newValue);
      },
    },
  },
  mounted() {
    if (this.value) {
      let name = this.fileName;

      let url = "http://b.xinyueai.com" + this.value;
      if (!name) {
        name = this.value.replace(/.+\//, "");
        console.log(name);
      }
      this.fileList = [{ name, url }];
    }
  },
  methods: {
    beforeAttFileUpload(file) {
      let typeName = file.name.substr(-4);
      let accept = ".doc,.pdf,.xlsx";
      if (accept.indexOf(typeName) == -1) {
        this.$message.error("请上传文件 格式：.doc.xlsx.pdf");
        return false;
      }

      const isLt2M = file.size / 1024 / 1024 < 10;

      if (!isLt2M) {
        this.$message.error("上传文件大小不能超过 10MB!");
        return false;
      }
      return true;
    },
    async uploadAttachment(e) {
      console.log(e);
      const fd = new FormData();
      fd.append("file", e.file);

      let response = await this.$http.upload(e.action, fd);
      return response;
    },
    handleSuccess(response) {
      // console.log(this.onSuccess);
      this.fileName = response.data.Data.docname;
      if (this.onSuccess) {
        this.onSuccess(response.data.Data);
      }
      this.$emit("input", response.data.Data.docurl);
    },
    handleError(response) {
      console.error(response);
    },

    onPreview(file, e) {
      console.log(file);
      console.log(e);
      // window.location.href = file.url;
      this.$common.downloadFile({ url: file.url });
    },
    handleExceed(...e) {
      console.log(e);
      this.$refs.attFile.clearFiles();
    },
    onChange(file, fileList) {
      console.log(file);
      console.log(fileList);
      if (fileList.length > 0) {
        this.fileList = [fileList[fileList.length - 1]]; // 这一步，是 展示最后一次选择文件
      }
    },
  },
};
</script>
<style lang="less" scoped></style>
